<template>
  <div class="dataManage video_wrapper">

    <nav-bar class="home-nav">
      <div class="left" slot="left" @click="goBack">
        <van-icon name="arrow-left" size="24"/>
      </div>
      <div slot="center">传感器数据</div>
    </nav-bar>

    <div>
      <div class="calendar">
        <div class="month_box">
          <div
            :class="{'have':item.is_h==1,'month_item':true,'hover':month == item.month}"
            v-for="(item,index) in monthArr"
            @click="onChangeMonth(item,index)"
          >{{item.month}}
          </div>
        </div>

        <div class="day_box">
        <span
          :class="{'have':item.is_h==1,'hover':date == month+'-'+item.day}"
          v-for="(item,index) in days"
          @click="onChangeDay(item,index)"
        >{{item.day}}</span>
        </div>
      </div>
    </div>
   <NewsSensorDetial :sid2="sid" :bid2="bid" :date2="date" ></NewsSensorDetial>
    <!--<div v-else><no-data></no-data></div>-->
  </div>
</template>

<script>
  import NavBar from "@/components/common/navbar/NavBar"
  import noData from "@/components/content/nodata";
  import NewsSensorDetial from "@/components/common/newsensor/NewsSensorDetial";
    export default {
        name: "NewSensor",
        data(){
          return{
            bid: '',
            sid: '',
            isSensor:false,//是否弹出视频播放
            videourl:'',//视频播放地址
            monthArr:'',
            times: [],//事件数组
            days: [],//天数数组
            time: '',//当前时间
            month: '',
            date:'',
            active:0,
          }
        },
      components: {
        NavBar,
        noData,
        NewsSensorDetial
      },

      created() {

        this.bid = this.$route.query.bid;
        this.sid = this.$route.query.sid;
        this.getTimes();
      },
        mounted(){

        },
        methods:{
          onSwipeLeft(e){
            console.log('左：',e)
          },

          onSwipeRight(e){
            console.log('有：',e)
          },

          getTimes() {
            let that = this;
            this.$http.get("/api/UserCheckApi/getMonth?bid=" + that.bid + "&sid=" + that.sid, null, r => {
              this.times = r.data;
              console.log('传感器年月', r.data);
              that.monthArr = r.data;
              let months = r.data
              let h_months = []
              months.forEach(function(item,i){
                if(item.is_h == 1){
                  h_months.push(item.month)
                }
              })
              console.log('h_months:',h_months)
              that.month = h_months[h_months.length-1]
              this.getDays();
            });
          },

          getDays() {
            let that = this;
            this.$http.get("/api/UserCheckApi/getDay?bid=" + that.bid + "&sid=" + that.sid + "&month=" + that.month
              , null, r => {
                console.log("传感器视频天数：", r.data);
                this.days = r.data;
                let days = r.data
                let h_days = []
                days.forEach(function(item,i){
                  if(item.is_h == 1){
                    h_days.push(item.day)
                  }
                })
                console.log('h_days:',h_days)
                that.date = that.month+'-'+h_days[h_days.length - 1]
              });
          },

          onChangeMonth(e, index) {
            let that = this;
            that.month = e.month;
            that.active=index;
            that.getDays();
          },

          onChangeDay(e, index) {
            let that = this;
            console.log('e:',e);
            let date = that.month+ "-" + e.day;
            that.date = date;
            console.log('date', date);
            that.isSensor=true;
          },

          goBack() {
            this.$router.go(-1);
          },




        },




    }
</script>

<style scoped>
  .calendar {
    background: #fff;
    border-bottom-left-radius: .3rem;
    border-bottom-right-radius: .3rem;
  }

  .month_box {
    display: -webkit-box;
    flex-flow: row nowrap;
    justify-content: space-around;
    overflow-x: auto;
    font-size: .32rem;
    padding: .2rem;
    color: #a0a0a0;
  }

  .month_item.have:after {
    position: absolute;
    right: .12rem;
    top: 0;
    font-size: .3rem;
    content: '\25CF';
    color: #009944;
  }

  .month_item {
    position: relative;
    padding: .2rem;
    margin: .1rem;
  }

  .month_item.hover {
    color: var(--color-tint);
    background: #e6e7ff;
    border-radius: .1rem;
  }

  .day_box {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    /*display: flex;*/
    /*flex-flow: row wrap;*/
    /*overflow-x: auto;*/
    font-size: .3rem;
    font-weight: bold;
    padding: .2rem 0;
    border-top: 1px solid #eeeeee;
  }

  .day_box span {
    position: relative;
    /*padding: 18px 15px;*/
    padding: .2rem .2rem;
    margin: .16rem;
    background-color: #f0f2f7;
    border-radius: .1rem;
  }

  .day_box span.have:after {
    position: absolute;
    right: 50%;
    bottom: 0;
    font-size: 8px;
    width: .3rem;
    content: '\25CF';
    color: #eb6100;
    margin-right: -.15rem;
    text-align: center;
  }

  .day_box span.hover {
    color: #ffffff;
    background: var(--color-tint);
  }

  .inputVideo {
    height: 1rem;
    line-height: 1rem;
    background: var(--color-tint);
    color: #fff;
    font-size: .36rem;
    border-radius: 5px;
    text-align: center;
  }

  .upload_box_title {
    height: 44px;
    line-height: 44px;
    font-size: 16px;
    text-align: center;
    background: var(--color-tint);
    color: #fff;
    font-weight: normal;
  }

  .upload_box >>> .van-popup__close-icon {
    top: 11px;
    color: #fff;
  }

  .video_date {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    text-align: center;
    height: .5rem;
    line-height: .5rem;
    font-size: .28rem;
    background: rgba(255, 255, 255, 0.8);
  }

  .video_box {
    display: flex;
    /*justify-content: space-between;*/
    flex-wrap: wrap;
    padding: 15px 5px;
  }

  .video_item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: 15px;
    margin: 10px 8.8px;
    background: #ffffff;
    border-radius: 8px;
  }

  .video_item >>> .van-icon-clear {
    position: absolute;
    right: -10px;
    top: -10px;
    background: #fff;
    border-radius: 50%;
  }

</style>
